/* eslint-disable no-unused-vars */
import * as React from "react";
import { useState, useRef } from "react";
import { AreaChartOutlined } from "@ant-design/icons";
import { css } from "@emotion/react";
import { CSSObject } from "@emotion/react";
import { Button, Col, Row } from "antd";
import { useAppDispatch, useAppSelector } from "apis/module/store";
import { setTheme } from "apis/module/store/slices/appSlice";
import Banner, {
  BannerItem,
  BannerProps,
} from "biz-component/components/app-layout/Banner";
import Features, {
  Feature, // FeaturesProps,
} from "biz-component/components/app-layout/Features";
import { lgTheme, commTheme, useEmotionCss, AppThemeNameType } from "theme";
import { useAppToken } from "theme";
import { HrStyle } from "ui";
import logo from "@/assets/images/bg-login.jpg";
import Counter from "./Counter";
import ShowAntStyle from "./ShowAntStyle";
import ShowBizField from "./ShowBizField";
import ShowBzDescription from "./ShowBzDescription";
import ShowColorPicker from "./ShowColorPicker";
import ShowDescriptions from "./ShowDescritions";
import ShowDictionary from "./ShowDictionary";
import ShowHtmlToImage from "./ShowHtmlToImage";
import ShowQueryForm from "./ShowQueryForm";

type CSSprops = {
  css?: CSSObject;
} & React.HtmlHTMLAttributes<HTMLHRElement>;

const P = (props: CSSprops) => {
  const { token } = useAppToken();

  return (
    <p
      css={{
        margin: 0,
        fontSize: token.fontSizeSM,
        lineHeight: 1.5,
        color: token.colorInfo,
      }}
      {...props}
    />
  );
};

const StyleDiv = () => {
  const { token } = useAppToken();

  return (
    <div
      css={css`
        padding: 32px;
        background-color: hotpink;
        font-size: ${token.fontSizeHeading3}px;
        border-radius: 4px;
        color: black;
        &:hover {
          color: orange;
        }
        & .name {
          color: blue;
          font-size: ${token.fontSize}px;
        }
        @media screen and (max-width: ${token.screenSM}px) {
          color: red;
        }
      `}
    >
      This is ademo
      <div className="name">This is className</div>
    </div>
  );
};

const Home = () => {
  const { token } = useAppToken();
  // const [themeName, setThemeName] = useState<AppThemeNameType>("common");
  const dispatch = useAppDispatch();
  const currentThemeName = useAppSelector((state) => state.app.theme.name);
  const currentThemeKey = useAppSelector((state) => state.app.theme.key);
  const ref = useRef<HTMLDivElement>(null);

  const textClassName = useEmotionCss(({ token }) => ({
    color: token.colorText,
    // lineHeight: token.lineHeight,
    // fontSize: token.fontSize,
  }));

  const handleTheme = () => {
    console.log("clike button update theme...");
    // 不能只看 state 状态，要看真正的 theme
    if (currentThemeKey === "common") {
      dispatch(setTheme(lgTheme));
      // setThemeName("lg");
    } else {
      dispatch(setTheme(commTheme));
      // setThemeName("common");
    }
  };

  const banner: BannerItem[] = ["https://dummyimage.com/1920x400", logo];
  const bannerProps: BannerProps = {
    data: banner,
  };

  const features: Feature[] = [
    {
      icon: <AreaChartOutlined />,
      title: "统计工作量",
      description: "只有一个 feature 时显示不全信息",
    },
    {
      icon: "https://dummyimage.com/80x80",
      title: "xxxx2",
      description: "不舒服的周末，马达，还是跌",
    },
  ];
  // const featuresProps: FeaturesProps = {
  //   data: features,
  // };

  return (
    <div className={textClassName}>
      首页
      <div ref={ref}>
        <StyleDiv />
        <HrStyle />
        <Button type="primary" onClick={handleTheme} style={{ marginRight: 8 }}>
          切换主题
        </Button>
        <P
          css={{
            fontSize: token.fontSizeHeading5,
            color: token.colorSuccess,
          }}
        >
          当前主题 {currentThemeName}
        </P>
        <P>Geckos are a group of usually small, usually noci</P>
        {/* <HrStyle />
      <Row gutter={[0, 64]}>
        {features && features.length > 0 && (
          <Col span={24}>
            <Features data={features} />
          </Col>
        )}
        {banner && banner.length > 0 && (
          <Col span={24}>
            <Banner {...bannerProps} />
          </Col>
        )}
      </Row> */}
        <ShowDictionary />
      </div>
      <ShowHtmlToImage myRef={ref} />
      <HrStyle />
      <ShowAntStyle />
      <HrStyle />
      <ShowBizField />
      {/* <ShowDescriptions /> */}
      <ShowQueryForm />
      <ShowColorPicker />
      <HrStyle />
      <Counter />
      <HrStyle />
      <ShowBzDescription />
    </div>
  );
};

export default Home;
